import React, { Component } from 'react'
import axios from "./utils/axios"
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'
export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
       list:[],
       newArr:[]
     
    }
  }
componentDidMount() { 
  axios.get("/list").then(res=>{
    this.setState({
      list:res.data,
      newArr:res.data
    })
  })
 }
serchfn=(val)=>{
let {list,newArr}=this.state
 newArr= list.filter((item)=>{
   return item.title.includes(val)
  })
  this.setState({
    newArr:newArr
  })

}

  render() { 
    const {newArr}=this.state

    return (
      <div className='App'>
        <Header serchfn={this.serchfn}></Header>
        <Main list={newArr}></Main>
        <Footer ></Footer>
      </div>
    )
  }
}

export default App
